<template>
  <el-dialog
    title="添加排班时段"
    v-model="showDialog"
    width="max(30%, 480px)"
    :fullscreen
  >
    <el-form label-width="80px" :model="formContent" v-if="showDialog">
      <el-form-item label="时段名词">
        <div style="width: 100%; display: flex; align-items: center; gap: 8px">
          <el-input
            v-model="formContent.taskName"
            placeholder="Enter task name"
            style="flex: 1"
            ref="taskNameInput"
            @mouseenter="handleMouseEnterTaskName"
          ></el-input>
        </div>
      </el-form-item>
      <el-form-item label="排班粒度">
        <div style="width: 100%; display: flex; align-items: center; gap: 8px">
          <el-select
            v-model="formContent.granularity"
            placeholder="Select time granularity"
            style="flex: 1"
          >
            <el-option
              v-for="item in [20, 30, 40, 60]"
              :key="item"
              :label="item + ' 分钟'"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="起始时间">
        <div style="width: 100%; display: flex; align-items: center; gap: 8px">
          <el-date-picker
            v-model="formContent.startDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Select start date"
            style="flex: 4"
            :clearable="false"
          ></el-date-picker>
          <el-time-select
            v-model="formContent.startTime"
            start="00:00"
            :step="`00:${formContent.granularity}`"
            end="23:59"
            placeholder="Select start time"
            style="flex: 3"
            :clearable="false"
          ></el-time-select>
        </div>
      </el-form-item>
      <el-form-item label="截止时间">
        <div style="width: 100%; display: flex; align-items: center; gap: 8px">
          <el-date-picker
            v-model="formContent.endDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Select end date"
            style="flex: 4"
            :clearable="false"
          ></el-date-picker>
          <el-time-select
            v-model="formContent.endTime"
            start="00:00"
            :step="`00:${formContent.granularity}`"
            end="23:59"
            placeholder="Select end time"
            style="flex: 3"
            :clearable="false"
          ></el-time-select>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAddContent">
          <span>添加</span>
        </el-button>
        <el-button link @click="showDialog = false">
          <span>取消</span>
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import dayjs from "dayjs";
import usePlanningStore from "@/stores/planningStore";
import useCommonStore from "@/stores/commonStore";
const planningStore = usePlanningStore();
const commonStore = useCommonStore();

const fullscreen = computed(() => commonStore.isMobile);

const showDialog = ref(false);

const openDialog = () => {
  formContent.value = {
    taskName: "时段_" + planningStore.timeRanges.length,
    startDate: dayjs().add(1, "day").format("YYYY-MM-DD"),
    endDate: dayjs().add(2, "day").format("YYYY-MM-DD"),
    startTime: "11:00",
    endTime: "11:00",
    granularity: 30,
  };
  showDialog.value = true;
};

defineExpose({
  openDialog,
});

const taskNameInput = ref(null);

const handleMouseEnterTaskName = () => {
  taskNameInput.value.focus();
  taskNameInput.value.select();
};

const formContent = ref();

const handleAddContent = () => {
  planningStore.timeRanges.push({ ...formContent.value });
  planningStore.timeRanges.sort(
    (a, b) =>
      dayjs(`${a.startDate} ${a.startTime}`).unix() -
      dayjs(`${b.startDate} ${b.startTime}`).unix()
  );
  showDialog.value = false;
  // formContent.value = { ...formContentBackup };
  ElMessage.success("已添加时段");
};

// let formContentBackup = null;

onMounted(() => {
  console.log("Planning Input mounted");
  // formContentBackup = { ...formContent };
});
</script>
